<template>
  <view class="page">
    <view class="page-content">
      <CardComponent :showTitle="false" :showImage="false">
        <template #default>
          <view class="page-title person-title">{{ supplierData.companyName }}</view>
          <view class="person-info">
            <view class="">管理员</view>
            <view class="name">{{ supplierData.name }}</view>
            <fui-icon name="setup" size="48" color="var(--fui-color-primary)" @click="jumpCompanyInfo"></fui-icon>
          </view>
          <view class="info-btn">
            <view @click="jumpCompanyInfo" class="btn btn-left">
              <view class="">公司已认证</view>
              <image
                class="img"
                src="/static/images/company/link-left.png"
                mode=""
              ></image>
            </view>
            <!-- <view @click="jumpBankInfo" class="btn btn-right">
              <view class="">银行已认证</view>
              <image
                class="img"
                src="/static/images/company/link-right.png"
                mode=""
              ></image>
            </view> -->
          </view>
        </template>
      </CardComponent>
      
      <CardFirstkind :data="supplierData"></CardFirstkind>
      <!-- 预警提示 -->
      <view class="forewarning" v-show="!supplierData.number1 || !supplierData.number2">
        <view class="title">
          <image
            class="img"
            src="/static/images/company/forewarning.png"
            mode=""
          ></image>
          <text>预警提示</text>
        </view>
        <view class="">{{ permTipsText }}</view>
      </view>

      <CardComponent logoColor="var(--fui-color-primary)" :showImage="false">
        <template #header>
          <!-- 这里是头部内容 -->
          <view class="">人员列表</view>
        </template>
        <template #default>
          <view class="person-list">
            <view
              class="person-list-item"
              v-for="item in personList"
              :key="item.id"
              @click="jumpPersonModify(item.id, 'view', supplierData.name)"
            >
              <image class="img" :src="item.url ? item.url : '/static/images/company/person-head.png'" mode=""></image>
              <view class="person-list-name">{{ item.name }}</view>
              <fui-tag
                size="24"
                :background=" item.status == 0 || item.status == '在职'  ? '#EFF3FF' : item.status == 1 || item.status == '离职' ? '#FFF2F2' : '#F7F7F7' "
                :color="item.status == 0 || item.status == '在职' ? 'var(--fui-color-primary)' : item.status == 1 || item.status == '离职' ? '#F95A5A' : '#999999' "
                :text="item.status == 0 || item.status == '在职' ? '在职' : item.status == 1 || item.status == '离职' ? '离职' : '停职' "
                :padding="['6rpx', '14rpx']"
              ></fui-tag>
            </view>
            <view class="person-list-item" @click="jumpPersonInfo('add')">
              <image
                class="img"
                src="/static/images/company/add-person.png"
                mode=""
              ></image>
              <view class="add-person">添加人员</view>
            </view>
          </view>
        </template>
      </CardComponent>
    </view>
  </view>
</template>

<script setup>
import { ref, inject, watch, computed, onBeforeMount } from "vue";
import { onLoad, onShow } from '@dcloudio/uni-app';
import CardComponent from "@/components/card/normal";
import CardFirstkind from "@/components/card/firstKind";
import api from "@/api/staff.js"
import { useStore } from 'vuex';

const store = useStore();
const supplierId = ref();
const deptId = ref();
const modal = inject("$modal");


onShow(() => {
  // 如果需要在每次打开时都加载最新数据
  supplierId.value = store.getters.companyId
  getCompanyDetail();
  getAdminDetail();
  getStaffListFun();
  getChainUserStatisticsFun();
});

// 页面加载时，运行
onLoad(() => {
  // 获取供应链id/供应商id
  supplierId.value = store.getters.companyId
  deptId.value = store.getters.currentDeptId
});

const supplierData = ref({
  companyName: "",
  name: "",
  title: "管理人员",
  number1: 0,
  number2: 0,
  status1: store.getters.userType == 1 ? "商品管理人员" : "商品专员",
  status2: store.getters.userType == 1 ? "订单管理人员" : "订单专员",
  color: "var(--fui-color-primary)",
  unit: "人",
  id:""
});

const permTipsText = computed(() => {
  const arr = []
  if (!supplierData.value.number1) {
    arr.push(supplierData.value.status1)
  }
  if (!supplierData.value.number2) {
    arr.push(supplierData.value.status2)
  }
  return arr.length ? (arr.join('，') + '权限为0，请尽快设置。') : ''
})

const personList = ref([]);

// api 参数
const SelfQueryData = ref({
  pageNo: 1,
  pageSize: -1,
  supplierId:0,
  deptId:0
});

const Num = (id) => {
  let supplierIdNum = Number(id)
  SelfQueryData.value = {
    pageNo: 1,
    pageSize: -1,
    supplierId:supplierIdNum ,
    deptId: deptId.value
  };
  return SelfQueryData
}

const getSelfQueryData = ({
  pageNo = 1,
  pageSize = -1,
}) => {
  SelfQueryData.value = {
    pageNo,
    pageSize
  };
};

// 获取公司信息
const companyApiUrl = computed(() => {
  let apiUrl = ''
  if (store.getters.userType == 1) apiUrl = 'getSupplyInfo'
  if (store.getters.userType == 2) apiUrl = 'getSupplierInfo'
  return apiUrl
})
const getCompanyDetail = () => {
  api[companyApiUrl.value](supplierId.value, deptId.value).then((res) => {
    modal.closeLoading();
    if(res.code === 0){
      if(store.getters.userType == 1){
        supplierData.value.companyName = res.data.info.name
        supplierData.value.id = res.data.info.id
      }else{
        supplierData.value.companyName = res.data.companyName
        supplierData.value.id = res.data.id
      }
    }
  })
} 

// 获取负责人信息
const adminApiUrl = computed(() => {
	let apiUrl = ''
  if (store.getters.userType === '1') apiUrl = 'getSupplyAdminDetail'
  if (store.getters.userType === '2') apiUrl = 'getSupplierAdminDetail'
  return apiUrl
})
const getAdminDetail = () => {
	api[adminApiUrl.value](store.getters.companyId).then((res) => {
		if (res.code == 0 && res.data) {
			supplierData.value.name = res.data.adminName
		}
	})
}

// 查询供应链、供应商人员列表
const getStaffListApiUrl = computed(() => {
  let apiUrl = ''
  if (store.getters.userType == 1) apiUrl = 'getSupplyStaffList' // 供应链员工
  if (store.getters.userType == 2) apiUrl = 'getSupplierStaffList' // 供应商员工
  return apiUrl
})

// api 获取人员列表
const getStaffListFun = () => {
  Num(supplierId.value) //将供应商id转换为数字型
  api[getStaffListApiUrl.value](SelfQueryData.value).then((res) => {
    modal.closeLoading();
    if (res.code === 0) {
      personList.value = res.data.list.map((item) => {
        return {
          ...item,
          id: item.id,
          url: store.getters.userType == 1 ? item.avatar : item.avator,
          name: store.getters.userType == 1 ? item.nickname : item.name,
          status: item.status
        };
      });
    } else {
      modal.msgError(res.msg);
    }
  });

};

// 查询供应链、供应商管理人员数量
const getChainUserStatisticsApiUrl = computed(() => {
  let apiUrl = ''
  if (store.getters.userType == 1) apiUrl = 'getSupplyChainUserStatistics' // 供应链 管理人员数量
  if (store.getters.userType == 2) apiUrl = 'getSupplierChainUserStatistics' // 供应商 管理人员数量
  return apiUrl
})

// api 获取管理人员数量
const getChainUserStatisticsFun = () => {
  api[getChainUserStatisticsApiUrl.value](supplierId.value, deptId.value).then((res) => {
    modal.closeLoading();
    if (res.code === 0) {
      if(store.getters.userType == 1){
        supplierData.value.number1 = res.data[0].count
        supplierData.value.number2 = res.data[1].count
      }else{
        supplierData.value.number1 = res.data.商品管理人员
        supplierData.value.number2 = res.data.订单管理人员
      }

    } else {
      modal.msgError(res.msg);
    }
  });

};


// 人员
const jumpPersonInfo = (action) => {
  uni.navigateTo({
    url: `/pages/company/staff?action=${action}`,
  });
};
const jumpPersonModify = (userID, action, name) => {
  uni.navigateTo({
    url: `/pages/company/staff?userID=${userID}&action=${action}&name=${name}`,
  });
};
// 公司信息
const jumpCompanyInfo = () => {
  uni.navigateTo({
    url: `/pages/company/companyInfo`,
  });
};
// 银行信息
const jumpBankInfo = () => {
  uni.navigateTo({
    url: `/pages/company/bankInfo`,
  });
};
</script>

<style lang="scss" scoped>
.page {
	.numStyle {
		color: var(--fui-color-primary);
		font-weight: bold;
	}

	.gray-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	background: #f8f8f8;
	position: relative;
	min-height: 100%;
	&-content {
    padding-top:30rpx;
		width: calc(100% - 72rpx);
    margin: 0 auto;
	}
	&-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

  .person-title {
    padding-right: 56rpx;
  }
	.person-info {
    padding-right: 40rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		margin-top: 16rpx;
		.name {
			font-weight: bold;
			color: #333333;
			margin-left: 26rpx;
		}
    .fui-icon {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
    }
	}
	.info-btn {
		display: none;
		align-items: center;
		margin-top: 32rpx;
		.btn {
			background: #ecf4ff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 12rpx 36rpx 14rpx 44rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: var(--fui-color-primary);
			display: flex;
			align-items: center;
			justify-content: center;
			.img {
				width: 30rpx;
				height: 30rpx;
				margin-left: 6rpx;
			}
		}
		.btn-right {
			background: #fff9e8;
			color: #ffbb00;
			margin-left: 40rpx;
		}
	}
	.person-list {
		padding: 0 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		margin-top: 44rpx;
		&-item {
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			align-items: center;
			width: 25%;
			height: auto;
			margin-bottom: 54rpx;
			.img {
				width: 90rpx;
				height: 90rpx;
        background-color: #f8f8f8;
        border-radius: 100%;
			}
      .person-list-name{
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        width: 100%;
        text-align: center;
      }
		}
		&-name {
			margin: 18rpx 0 14rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}
		.add-person {
			margin: 18rpx 0 14rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: var(--fui-color-primary);
		}
	}
	.forewarning {
		display: flex;
		flex-direction: column;
		background: #ffecec;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #fc5353;
		padding: 26rpx 32rpx;
		margin-bottom: 22rpx;
		.title {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;
			.img {
				width: 23.71rpx;
				height: 23.71rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
